<template>
    <view class="container">
        <u-navbar
            title="藏品详情"
            :autoBack="true"
            :bgColor="'rgba(35,35,35, '+bgOpacity+')'"
            leftIconSize="50rpx"
            leftIconColor="#ffffff"
            height="100rpx"
            :titleStyle="{
                fontSize: '34rpx',
                fontWeight: 'bold',
                color: 'rgba(255, 255, 255, '+bgOpacity+')',
            }"
            :leftIconColor="'rgba(255, 255, 255, '+bgOpacity+')'"
        >
        </u-navbar>
        <u-transition v-if="nftInfo != null" :show="nftInfo != null">
            <u-list
                :scrollIntoView="currentView"
                @scroll="scrollInfo"
            >
                <view class="nft-info">
                    <block v-if="productInfo.showMode=='horizontal'">
                        <view class="mainImg-mc">
                            <image
                                :src="nftInfo.img"
                                class="mainImg"
                                mode="widthFix"
                            ></image>
                        </view>
                        <view class="mainImg-shadow"></view>
                    </block>
                    <block v-if="productInfo.showMode=='vertical'">
                        <view class="mainImg-vertical-mc">
                            <image
                                :src="nftInfo.img"
                                class="vertical-mainImg"
                                mode="heightFix"
                            ></image>
                        </view>
                        <view class="mainImg-vertical-shadow"></view>
                    </block>
                    <block v-if="productInfo.showMode=='symmetry'">
                        <view class="mainImg-symmetry-mc">
                            <image
                                :src="nftInfo.img"
                                class="vertical-mainImg"
                                mode="scaleToFill"
                            ></image>
                        </view>
                        <view class="mainImg-symmetry-shadow"></view>
                    </block>
                    <u-text
                        :text="nftInfo.name"
                        size="36rpx"
                        color="#ffffff"
                        lineHeight="50rpx"
                        align="center"
                        margin="0 0 36rpx 0"
                        :lines="1"
                    ></u-text>
                    <nft-author v-if="productInfo.author && type === 'exchange'" :author="productInfo.author"></nft-author>
                    <owner-author v-if="type === 'collection'"></owner-author>
                </view>
                <view class="bg">
                    <u-sticky :zIndex="1" :customNavHeight="98 + statusBarHeight" bgColor="#232323">
                        <u-tabs
                            :list="tabs"
                            lineColor="#FFFFFF"
                            lineWidth="69rpx"
                            lineHeight="4rpx"
                            activeStyle="font-size: 26rpx;color: #ffffff;line-height: 37rpx;"
                            inactiveStyle="font-size: 26rpx;color: #888888;line-height: 37rpx;"
                            itemStyle="flex:1;height: 100rpx;border-bottom: 1px solid #2E2F30;"
                            :scrollable="false"
							:current="tabsIndex"
                            @click="tabClick"
                        ></u-tabs>
                    </u-sticky>
                    <view class="detail-item"  v-show="currentView == 'detail'" >
                        <view class="product-detail"><rich-text :nodes="productInfo.detail"></rich-text></view>
                    </view>
                    <view id="block" v-show="currentView == 'block'" class="detail-item">
                        <block-item :nft="nftInfo"></block-item>
                    </view>
                    <view class="border"></view>
                    <view class="extend">
                        <view class="extend-item" v-for="(item, k) in productInfo.extendInfo" :key="k">
                            <view class="extend-title">···————「 {{ item.title }} 」————···</view>
                            <view class="extend-content">{{ item.content }}</view>
                        </view>
                    </view>
                    <view class="h-30"></view>
                </view>
            </u-list>
            <!--view class="bottom" v-if="type === 'collection'">
                <u-icon
                    name="list-dot"
                    class="list-dot"
                    color="#ffffff"
                    size="50rpx"
                    @click="$u.route({
                        url: 'pages/extractDetail/index',
                        params: {nftId: nftInfo.id}
                    })"
                ></u-icon>
                <u-line direction="col" length="66rpx" color="#878787" margin="0 0 0 49rpx"></u-line>
                <view class="item-right">
                    <view @click="showTips=true" class="item-right-btn">提取</view>
                    <u-line direction="col" length="66rpx" color="#878787" margin="0 0 0 49rpx"></u-line>
                    <view class="item-right-btn" @click="$u.route({
                        url: 'pages_v2/hangingSale/index',
                        params: { nftId: nftInfo.id}
                    })">挂售</view>
                </view>
            </view-->
            <view class="exchange-bottom" v-if="type === 'exchange'">
                <u-text
                    :text="actionSellerNft.money"
                    size="40rpx"
                    prefixIcon="rmb"
                    color="#FFFFFF"
                    bold
                    iconStyle="font-size: 26rpx; color: #FFFFFF; font-weight: bold;top: 10rpx;"
                ></u-text>
                <view class="btn-ground">
                    <view class="sale-list-btn" @click="sellerSheetShow = true">在售列表</view>
                    <view
                      class="buy-btn"
                      @click="buyNft()"
                    >立即购买</view>
                </view>
            </view>
            <u-action-sheet :show="sellerSheetShow"  round="30rpx">
                <view class="seller-sheet-body">
                    <view class="seller-sheet-title">在售列表</view>
                    <view class="seller-sheet-close" @click="sellerSheetShow = false"></view>
                    <u-list
                        @scrolltolower="scrolltolower"
                        height="850rpx"
                        :preLoadScreen="total"
                    >
                        <u-list-item v-for="item in sellerList" :key="item.id">
                            <seller-item
                                :exchangeOrder="item"
                                :nftTotal="nftInfo.total"
                                @buy="buyNft(item.id)"
                            ></seller-item>
                        </u-list-item>
                    </u-list>
                </view>
            </u-action-sheet>
            <u-popup
                :show="popupShow"
                mode="center"
                :customStyle="{
                    width: '600rpx',
                    background: '#FFFFFF',
                    boxShadow: '0px 0px 13rpx 0px #999999',
                    borderRadius: '18rpx',
                    overflow: 'hidden'
                }"
            >
                <popup-context
                    v-if="popupShow"
                    @cancel="popupShow = false"
                    :p_type="popupType"
                ></popup-context>
            </u-popup>
        </u-transition>
    </view>
</template>

<script>
    import NftAuthor from "@/components/NftAuthor"
    import BlockItem from "@/components/BlockItem"
    import SellerItem from "@/components/SellerItem"
    import { getCollectInfo, getExchangeSeller } from "@/config/api"
    import PopupContext from "@/components/PopupContext"
    import OwnerAuthor from "@/components/OwnerAuthor"
    export default {
        name: "index",
        components: {
            NftAuthor,
            BlockItem,
            SellerItem,
            PopupContext,
            OwnerAuthor
        },
        data() {
            return {
                tabs: [
                    {
                        name: "作品介绍",
                        value: "detail"
                    },
                    {
                        name: "链上信息",
                        value: "block"
                    }
                ],
                form: {
                    number: null,
                    token: null,
                    userNftId: null,
                    toAddr: null
                },
                currentView: "detail",
                tabsIndex: 0,
                nftInfo: null,
                navbarShow: false,
                showTips: false,
                showPopup: false,
                productInfo: {},
                type: "exchange",
                sellerSheetShow: false,
                listQuery: {
                    page: 1,
                    list_rows: 10,
                    column: "money",
                    direction: "asc",
                    nftId: null
                },
                sellerList: [],
                total: 0,
                actionSellerNft: {},
                popupShow: false,
                popupType: null,
                statusBarHeight: 0,
                scrollTop: 0
            }
        },
        onLoad(option) {
            this.listQuery.nftId = option.nftId
            this.type = option.type
            const res = uni.getSystemInfoSync()
            this.statusBarHeight = res.statusBarHeight/(uni.upx2px(100)/100)
            if (this.type === 'exchange') {
                this.getSellerData(false, true)
            }
            this.getData(option.nftId)
        },
        computed: {
            bgOpacity() {
                if(this.scrollTop === 0) {
                    return 0
                } else if (this.scrollTop < 414) {
                    var opacity = Math.floor(this.scrollTop/750 * 10) / 10
                    return  opacity
                } else {
                    return 1
                }
            },
        },
        methods: {
            scrollInfo(e) {
                this.scrollTop = e
                //1685
                //console.log(e)
            },
            tabClick(item) {
                this.currentView = item.value
            },
            async getData(id) {
                const res = await getCollectInfo({nftId: id})
                this.nftInfo = res.nft
                this.productInfo = res.product
            },
            async getSellerData(more = false, action = false) {
                const res = await getExchangeSeller(this.listQuery)
                if (more) {
                    this.sellerList = [...this.sellerList, ...res.items]
                } else {
                    this.sellerList = res.items
                }
                if (action && this.sellerList.length > 0) {
                    this.actionSellerNft = this.sellerList[0]
                }
                this.total = res.total
            },
            popupTqShow() {
                this.showPopup = true
                this.showTips = false
            },
            scrolltolower() {
                if (this.total > this.sellerList.length) {
                    this.listQuery.page += 1
                    this.getSellerData(true)
                }
            },
            buyNft(nftId = null) {
                if (this.$store.getters.identify == '0') {
                    this.popupShow = true
                    this.popupType = 'real'
                    return
                }
                uni.$u.route('pages_v2/collectInfo/confirm', {id: nftId? nftId:this.actionSellerNft.id})
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .nft-info {
            box-sizing: border-box;
            width: 100%;
            background: url("/static/nft_bg.png") no-repeat;
            background-size: 100% 100%;
            padding-top: calc(var(--status-bar-height) + 164rpx);
            padding-left: 26rpx;
            padding-right: 30rpx;
            padding-bottom: 38rpx;
            text-align: center;
            .mainImg{
                display: block;
                width: 606rpx;
                border-radius: 20rpx;
            }
            .mainImg-mc {
                display: flex;
                align-content: center;
                justify-content: center;
                background: url("https://img.ionepin.com/47a68bc9fd669393e7512bba45b3b3f82e3a6a54.png") no-repeat;
                background-size: 100% 100%;
                width: 630rpx;
                padding: 20rpx 12rpx;
                margin: auto;
            }
            .mainImg-shadow {
                background: url("https://img.ionepin.com/30668a053a99de576642ef36557f6cb84a110cdd.png") no-repeat;
                background-size: 100% 100%;
                width: 606rpx;
                height: 84rpx;
                margin: 10rpx auto 27rpx auto;
            }
            .vertical-mainImg {
                display: block;
                width: 100%;
                height: 100%;
                margin: 0 auto;
                border-radius: 20rpx;
            }
            .mainImg-vertical-mc {
                box-sizing: border-box;
                display: inline-block;
                height: 694rpx;
                background: url("https://img.ionepin.com/e12f2c64d0217253bdde6413f9d2e7c8ba900fbb.png") no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                padding: 16rpx;
            }
            .mainImg-vertical-shadow {
                background: url("https://img.ionepin.com/ebbeb07a27ad40d69f55c1903a3773abbb229446.png") no-repeat;
                background-size: 100% 100%;
                width: 372rpx;
                height: 84rpx;
                margin: 10rpx auto 27rpx auto;
            }
            .mainImg-symmetry-mc {
                box-sizing: border-box;
                display: inline-block;
                width: 534rpx;
                height: 534rpx;
                background: url("https://img.ionepin.com/4087212db7539198d066176aa07d59e9d53242b0.png") no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                padding: 20rpx;
            }
            .mainImg-symmetry-shadow {
                background: url("https://img.ionepin.com/895d76ea72b492d6fcf25d7a559f738e6fd50474.png") no-repeat;
                background-size: 100% 100%;
                width: 576rpx;
                height: 84rpx;
                margin: 8rpx auto 6rpx auto;
            }
        }
        .bg {
            background: #232323;
            padding-bottom: 100rpx;
            margin-top: -2px;
            .grab {
                padding: 0 30rpx 0 26rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 14rpx;

                .grab-item {
                    box-sizing: border-box;
                    width: 212rpx;
                    height: 92rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    border-radius: 4rpx;
                    border: 1rpx solid #797979;
                    text-align: center;
                    padding-top: 11rpx;

                    .grab-item-time {
                        margin-bottom: 5rpx;
                    }
                }
            }

            .h-20 {
                height: 20rpx;
            }
        }
        .detail-item {
            margin-top: 50rpx;
            padding: 0 30rpx 0 30rpx;
            .detail-title {
                text-align: center;
                color: #ffffff;
                margin-bottom: 47rpx;
            }
        }
        .extend {
            padding: 0 25rpx;
            .extend-item {
                .extend-title {
                    //font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    margin-bottom: 38rpx;
                }
                .extend-content {
                    font-size: 26rpx;
                    font-family: PingFang-SC-Light, PingFang-SC;
                    font-weight: 300;
                    color: #FFFFFF;
                    text-indent: 1.5em;
                }
            }
        }
        .border {
            width: 100%;
            height: 1px;
            background: #2E2F30;
            margin: 60rpx 0;
        }
        .h-30 {
            height: 30rpx;
        }
        .bottom {
            height: 100rpx;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
            .list-dot {
                margin-left: 37rpx;
            }
            .item-right {
                flex: 1;
                line-height: 100rpx;
                align-items: center;
                display: flex;
                .item-right-btn {
                    text-align: center;
                    flex: 1;
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
        }

        .exchange-bottom {
            z-index: 999;
            box-sizing: border-box;
            height: 100rpx;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000000;
            display: flex;
            justify-content: space-between;
            padding: 16rpx 30rpx;
            .btn-ground {
                display: flex;
                align-items: center;
                .sale-list-btn {
                    width: 220rpx;
                    height: 68rpx;
                    border-radius: 36rpx;
                    border: 1px solid #979797;
                    text-align: center;
                    line-height: 68rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
                .buy-btn {
                    width: 220rpx;
                    height: 68rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 68rpx;
                    background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/ece791cb2ee2dd41728fede386347f3ad7d743a2.png") no-repeat;
                    background-size: 100% 100%;
                    margin-left: 20rpx;
                }
            }
        }

        .seller-sheet-body {
            padding-top: 47rpx;
            padding-bottom: 30rpx;
            position: relative;
            .seller-sheet-title {
                font-size: 32rpx;
                font-weight: 400;
                color: #000000;
            }
            .seller-sheet-close {
                background: url("https://img.ionepin.com/e6ca3bf6b372078fed03bc62894656f098fac42c.png") no-repeat;
                background-size: 100% 100%;
                width: 44rpx;
                height: 44rpx;
                position: absolute;
                top: 30rpx;
                right: 38rpx;
            }
        }
    }
</style>
